<template>
  <span @click="open = true"><slot></slot></span>
  <a-modal
    v-model:open="open"
    centered
    :closable="false"
    :ok-text="okText"
    :cancel-text="cancelText"
    :confirm-loading="confirmLoading"
    @ok="onOk"
    @cancel="open = false"
  >
    <template #title>
      <div class="flex items-center">
        <ExclamationCircleOutlined :style="{ color: '#faad14', fontSize: '24px' }" />
        <div class="ml-2">
          {{ title }}
        </div>
      </div>
    </template>
    <div class="py-6 px-4 text-base">
      {{ description }}
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

defineProps({
  title: {
    type: String,
    default: '提示'
  },
  okText: {
    type: String,
    default: '确认'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmLoading: {
    type: Boolean,
    default: false
  },
  description: {
    type: String,
    default: '确认吗？'
  }
})
const emit = defineEmits(['confirm'])
const open = ref(false)
const onOk = () => {
  open.value = false
  emit('confirm')
}
</script>
<style lang="less" scoped></style>
